<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VueComponent</title>
  <script src="../js/vue.js"></script>
</head>
<body>
      <!-- (1) 组件的本质是一个构造函数 VueComponent ，每次extend的时候就会生成 -->
  <div id="root">
    <!-- (2) 每次 写<school></school>的时候Vue就会帮你实例化并调用
             即：new VueComponent(options)
    -->
    <school></school>
  </div>

<!-- (3) 每一次extend生成的VueComponent都是新的，都是返回的一个匿名函数，可能也是解耦吧
         下面是源码
          var Sub = function VueComponent(options) {
              console.log("VueComponent被调用了");
              this._init(options);
          };
          return Sub
     (4) 既然VueComponent是构造函数，那么组件内的所有this指向都是组件构造函数，可以把VueComponent看作类名
     (5) VueComponent实例对象简称vc，Vue实例对象简称vm
         可以大致看作是vc是vm的继承，vc没有vm的el
-->

  <script type='text/javascript'>

      const school = Vue.extend({

         template:`
            <div>
               学校：{{name}}
               <br></br>
               地址：{{address}}
               <br></br>
            </div>  
         `,
         data(){
            return {
               name:'尚硅谷',
               address:'北京昌平'
            }
         },
      })

      console.log(school);

      new Vue({
          template:`<school></school>`,
          el:'#root',
          components:{school}
      })
  </script>
</body>
</html>